<template>
  <div>
    <div class="head_">
      <div>
        <label style="color:#606266;font-size:14px">用户昵称</label>
        <el-input placeholder="用户名称" v-model="nickname"  style="width:200px" clearable />
      </div>
      <div style="margin-left:20px">
        <label style="color:#606266;font-size:14px">用户电话</label>
        <el-input placeholder="用户电话" v-model="phone"  style="width:200px" clearable />
      </div>
      <el-button style="margin-left:40px" type="primary" size="mini" @click="search">搜索</el-button>
    </div>

    <el-table :data="tableData" border>
      <el-table-column label="ID" align="center" width="50px">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <img style="width:40px;height:40px" :src="scope.row.avatarUrl" />
        </template>
      </el-table-column>
      <el-table-column label="电话" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.cellphone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="积分" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.integral }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.gender==0">未知</span>
          <span v-if="scope.row.gender==1" style="color:#32CD32">男</span>
          <span v-if="scope.row.gender==2" style="color:#FF1493	">女</span>
        </template>
      </el-table-column>
      <el-table-column label="国家" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.country}}</span>
        </template>
      </el-table-column>
      <el-table-column label="省份" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.province}}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.city}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{getDate(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="index"
        :page-size="pageSize"
        :page-sizes="[10,20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { userList } from "@/api/user.js";
import { getDate } from "@/utils/dateUtil.js";
export default {
  data() {
    return {
      index: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      nickname: "",
      phone: ""
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    search() {
      this.getData();
    },
    getDate(time) {
      return getDate(time);
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getData();
    },
    /**
     * 获取数据
     */
    getData() {
      userList(this.nickname, this.phone, this.index, this.pageSize).then(
        res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      );
    }
  }
};
</script>
<style scoped>
.head_ {
  display: flex;
  align-items: center;
  max-width: 100%;
  width: 100%;
  margin-bottom: 15px;
  height: 80px;
  background-color: #ffffff;
  padding: 0 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>